import React, { useEffect, useRef, useState } from 'react'
import { Input, Button, message } from 'antd';
import styles from "./login.module.css"
import logo from "@/assets/image/icon_logo.png"
import iconClose from "@/assets/image/icon_close.png"
import iconMin from "@/assets/image/icon_minimize.png"
import { useNavigate } from 'react-router-dom';
import httpClient from '@/renderer/data/remote/wan-android-api';
import { constUrl, constPage } from '@/common/constants';
import { sendLoginWindow, sendMainWindow } from '@/renderer/native-bridge';

/**
 * 登录页面
 */
export default function Login() {
  const navigate = useNavigate()
  const [account, setAccount] = useState("")
  const [password, setPassword] = useState("")
  return (
    <div className={styles.page}>
      <LoginToolBar></LoginToolBar>
      <img className={styles.imgLogo} src={logo} onClick={() => {
        sendLoginWindow("openDevTools")
      }}></img>

      <div className={styles.loginForm}>
        <Input size='large' placeholder='账号' onChange={(e) => {
          setAccount(e.target.value)
        }} />
        <div style={{ height: 20 }}></div>
        <Input.Password size='large' placeholder='密码' onChange={(e) => {
          setPassword(e.target.value)
        }} />

        <Button className={styles.btnRegister} type='link' onClick={(e) => {
          navigate(constPage.register)
        }}>去注册</Button>
      </div>
      <LoginButton account={account} password={password} />
    </div>
  )

  /**
   * 参数传递需要定义数据类型
   */
  interface PropsLoginButton {
    account: string,
    password: string
  }

  /**
   * 登录按钮，处理登录逻辑
   */
  function LoginButton({ account, password }: PropsLoginButton) {
    const [messageApi, contextHolder] = message.useMessage();

    async function requestLogin(account: string, password: string) {
      if (account.length === 0) {
        messageApi.warning("请输入账号")
      } else if (password.length === 0) {
        messageApi.warning("请输入密码")
      } else {
        messageApi.loading("登录中，请稍后")
        try {
          await httpClient.postForm(constUrl.userLogin, {
            "username": account,
            "password": password
          })
          sendLoginWindow("onLoginSuccess")
          sendMainWindow("createWindow")
        } catch (error) {
          messageApi.destroy()
          messageApi.error(error.msg)
          console.log("登录异常：", error)
        }
      }
    }

    const handleLoginClick = () => {
      requestLogin(account, password)
    }

    return (
      <div className={styles.btnLogin}>
        {contextHolder}
        <Button size='large'
          block
          type='primary'
          onClick={handleLoginClick}>登录</Button>
      </div>
    )
  }



  /**
   * 顶部工具栏
   */
  function LoginToolBar() {
    return (
      <div className={styles.toolbar}>
        <svg viewBox="0 0 1024 1024" className={styles.iconSetting} onClick={() => {
          sendLoginWindow("openDevTools")
        }}>
          <path d="M335.52 778.976L285.76 828.8a32 32 0 0 1-45.248 0L195.2 783.52a32 32 0 0 1 0-45.248l49.792-49.792A318.208 318.208 0 0 1 198.4 576H128a32 32 0 0 1-32-32v-64a32 32 0 0 1 32-32h70.4a318.208 318.208 0 0 1 46.624-112.48L195.2 285.76a32 32 0 0 1 0-45.248L240.48 195.2a32 32 0 0 1 45.248 0l49.792 49.792A318.208 318.208 0 0 1 448 198.4V128a32 32 0 0 1 32-32h64a32 32 0 0 1 32 32v70.4a318.208 318.208 0 0 1 112.48 46.624L738.24 195.2a32 32 0 0 1 45.248 0L828.8 240.48a32 32 0 0 1 0 45.248l-49.792 49.792A318.208 318.208 0 0 1 825.6 448H896a32 32 0 0 1 32 32v64a32 32 0 0 1-32 32h-70.4a318.208 318.208 0 0 1-46.624 112.48L828.8 738.24a32 32 0 0 1 0 45.248L783.52 828.8a32 32 0 0 1-45.248 0l-49.792-49.792A318.208 318.208 0 0 1 576 825.6V896a32 32 0 0 1-32 32h-64a32 32 0 0 1-32-32v-70.4a318.208 318.208 0 0 1-112.48-46.624zM480 896h64v-96.544l25.632-5.216a286.176 286.176 0 0 0 101.184-41.92l21.792-14.464 68.288 68.288 45.248-45.248-68.288-68.288 14.432-21.792A286.176 286.176 0 0 0 794.24 569.6l5.216-25.632H896v-64h-96.544l-5.216-25.632a286.176 286.176 0 0 0-41.92-101.184l-14.464-21.792 68.288-68.288-45.248-45.248-68.288 68.288-21.792-14.432A286.176 286.176 0 0 0 569.6 229.76L544 224.544V128h-64v96.544l-25.632 5.216a286.176 286.176 0 0 0-101.184 41.92l-21.792 14.464-68.288-68.288-45.248 45.248 68.288 68.288-14.432 21.792A286.176 286.176 0 0 0 229.76 454.4L224.544 480H128v64h96.544l5.216 25.632a286.176 286.176 0 0 0 41.92 101.184l14.464 21.792-68.288 68.288 45.248 45.248 68.288-68.288 21.792 14.432A286.176 286.176 0 0 0 454.4 794.24l25.632 5.216V896z m32-224a160 160 0 1 1 0-320 160 160 0 0 1 0 320z m0-32a128 128 0 1 0 0-256 128 128 0 0 0 0 256z">
          </path>
        </svg>
        <div>
          <img title='最小化' className={`${styles.iconTool}`} src={iconMin} onClick={(e) => {
            sendLoginWindow("minimize")
          }}></img>
          <img title='关闭' className={`${styles.iconTool}`} src={iconClose} onClick={() => {
            sendLoginWindow("close")
          }}></img>
        </div>
      </div>
    )

  }
}
